<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" href="common/images/logo.png" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all" id="lightThem">
    <link rel="stylesheet" type="text/css" href="css/index.css" media="all" id="index_light">
    <link rel="stylesheet" type="text/css" href="common/global.css" media="all" id="global_light">
    <link rel="stylesheet" type="text/css" href="css/customer_list.css" media="all">
    <style>
        .body {
            background-color: #DCE3E6;
            padding: 0 10px 1.5vh 10px;
            font-family: HarmonyOS_Sans_SC_Regular;
            /*height: 100vh;*/
        }
        .top{
            display: flex;
        }
        .top-left{
            width: 50%;
            background-color: #02a3c7;
            height: 180px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .top-right{
            width:50%;
            background-color: rgba(3, 123, 28, 0.85);
            margin-left: 8px;
        }
        .middle{
            display: flex;
            height: 70px;
        }
        .middle_item{
            width: 40%;
            height: 100px;
            margin-right: 8px;
            background-color: #FFFFFF;
            display: flex;
            justify-content: center !important;
            align-items: center;
        }
        .middle_item_content{
            display: flex;
            flex-direction: column;
            width: 30%;
            margin-left: 20px
        }
        .amount{
            font-weight: bolder;
            margin-right: 8px;
            font-size: 18px
        }
        .layui-card{
            margin: 0 7.5px;
        }
        .info_title{
            text-align: center;
            font-size: 26px;
            font-weight:lighter;
            margin: 20px auto;
        }
    </style>
<body>
<div class="body">
    <div class="layui-row layui-col-space15" id="sum_info">
        <!-- 收入数据 -->
    </div>
    <div class="layui-row layui-col-space15" style="margin-top: 40px">
        <div class="layui-card">
            <form class="layui-form" id="addOrEditForm" lay-filter="addOrEditForm">
                <div style="display: flex;align-items: center;justify-content: center;font-size: 14px;">
                    <div class="item-div" style="display: flex;align-items: center;margin-right: 0.5vw">
                        <span class="my-span" style="width:95px;margin-right: 15px;margin-top: 5px">选择业务员</span>
                        <select id="userList" name="user_id">
                            <option value="">全部</option>
                        </select>
                    </div>
                    <div class="item-div" style="display: flex;align-items: center;margin-right: 0.5vw;">
                        <span class="my-span" style="width:95px;margin-right: 15px;margin-top: 5px">日期类型</span>
<!--                        <input type="radio" name="date_type" title="按年" value="1"  lay-filter="radioChange" />-->
                        <input type="radio" name="date_type" title="按月" value="2"  lay-filter="radioChange" />
                        <input type="radio" name="date_type" title="按日" value="3" checked lay-filter="radioChange" />
                    </div>
                    <div class="item-div" >
                        <input class="layui-input" id="test1" type="text" style="width: 300px;display: none" autocomplete="off" >
                        <input class="layui-input" id="test2"  type="text" style="width: 300px;display: none" autocomplete="off" >
                        <input class="layui-input" id="test3" type="text" style="width: 300px;" autocomplete="off" >
                    </div>
                    <a class="layui-btn search_btn">查询</a>
                </div>
            </form>

            <div class="layui-card-body">
                <div id="bar" style="height: 380px;"></div>
            </div>
        </div>
    </div>
</div>
<script id="topSum" type="text/html">
    <div class="top">
        <div class="top-left" id="top-left">
            <img style="width: auto;height: 150px;margin-right: 28px;" src="./images/users.png">
            <div style="width: 77%">
                <div class="layui-row" style="display: flex;flex-direction: row;border-bottom: 2px solid #FFF;color: #FFF;margin-right: 25px">
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本年新增询价</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.year_inquiry_num}}</span>单
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本年成交订单</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.year_order_num}}</span>单
                        </div>
                    </div>
                </div>
                <div style="display: flex;color: #FFF">
                    <div style="display: flex;flex-direction: column;margin-right: 20px;" >
                        <span style="margin-top: 20px">应收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.year_sale_able_amount}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;border-right: 2px solid #FFF;color: #FFF;padding-right: 20px;">
                        <span style="margin-top: 20px">实收收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.year_sale_returned_money}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;padding-left:10px;margin-right: 20px;" >
                        <span style="margin-top: 20px">应付金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.year_purchase_total_cost}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;" >
                        <span style="margin-top: 20px">实付收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.year_purchase_pay_cost}}</span>元
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-left top-right">
            <img style="width: auto;height: 150px;margin-right: 28px;" src="./images/shop.png">
            <div style="width: 77%">
                <div class="layui-row" style="display: flex;flex-direction: row;border-bottom: 2px solid #FFF;color: #FFF;margin-right: 25px">
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本月新增询价</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.month_inquiry_num}}</span>单
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本月成交订单</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.month_order_num}}</span>单
                        </div>
                    </div>
                </div>
                <div style="display: flex;color: #FFF">
                    <div style="display: flex;flex-direction: column;margin-right: 20px;" >
                        <span style="margin-top: 20px">应收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.month_sale_able_amount}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;border-right: 2px solid #FFF;color: #FFF;padding-right: 20px;">
                        <span style="margin-top: 20px">实收收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.month_sale_returned_money}}</span>元
                        </div>
                    </div>

                    <div style="display: flex;flex-direction: column;margin-right: 20px;padding-left:10px;" >
                        <span style="margin-top: 20px">应付金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.month_purchase_total_cost}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;" >
                        <span style="margin-top: 20px">实付收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.month_purchase_pay_cost}}</span>元
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="middle" id="middle">
        <div class="middle_item">
            <img style="width: 53px;height: 58px;" src="./images/users.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <a href="javascript:;" class="toInquiry" style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_inquiry_num}} </a>
                    <span> 个 </span>
                </div>
                <span style="color: #878787">待报价</span>
            </div>
        </div>
        <div class="middle_item">
            <img style="width: 53px;height: 58px;" src="./images/logistics.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <a href="javascript:;" class="toInquiry" style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_bid_num}} </a>
                    <span> 个 </span>
                </div>
                <span style="color: #878787">投标中</span>
            </div>
        </div>
        <div class="middle_item">
            <img style="width: 53px;height: 58px;" src="./images/recharge.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <span style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_returned_money}} </span>
                    <span> 元 </span>
                </div>
                <span style="color: #878787">今日收入</span>
            </div>
        </div>
        <div class="middle_item" style="margin-right: 0">
            <img style="width: 53px;height: 58px;" src="./images/shop.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <span style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_pay_money}} </span>
                    <span> 元 </span>
                </div>
                <span style="color: #878787">今日支出</span>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="showNoticeForm">
    <div class="layui-card-body">
        <h3 class="info_title" id="notice_title"></h3>
        <p class="notice_content" id="content"></p>
    </div>
</script>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
<script type="text/javascript" src="./common/layui/layui2.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./jsplug/echarts.js"></script>

<script type="text/javascript">
    layui.use(['jquery', 'laydate', 'form', 'element','laytpl', 'layer'], function() {
        var $ = layui.jquery;
        var element = layui.element;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var type = 3;
        var beginDate = '';
        var endDate = '';

        var bar = echarts.init(document.getElementById("bar"));
        var xdata = [];
        var returndata = [];
        var paydata = [];

        layer.load(2);

        send_req('Notice/getUserNotice.html', {}, function (data) {
            if(data && !data.user_state){
                layer.open({
                    type: 1,
                    area: ['800px','600px'],
                    offset: '65px',
                    title: '通知公告',
                    content: $('#showNoticeForm').html(),
                    success: function (layero, index) {
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        $('#notice_title').html(data.notice_title);
                        $('#content').html(data.content);
                        form.render();
                    }
                })
            }
        });

        send_req('Common/getUserList.html', {}, function (res) {
            for(var i=0;i<res.length;i++){
                $("#userList").append('<option value="' + res[i].user_id + '">' + res[i].true_name + '</option>');
            }
            form.render();
        });

        form.on('radio(radioChange)', function(data){
            if(data.value == 1){
                $("#test1").show();
                $("#test2").hide();
                $("#test3").hide();
            }
            if(data.value == 2){
                $("#test1").hide();
                $("#test2").show();
                $("#test3").hide();
            }
            if(data.value == 3){
                $("#test1").hide();
                $("#test2").hide();
                $("#test3").show();
            }
            type = data.value
        });

        send_req('Order/getOrderSum', {}, function (data) {
            layer.closeAll('loading');
            var detail = document.getElementById('topSum');
            var getLoadTpl = detail.innerHTML;
            var detailView = document.getElementById('sum_info');
            laytpl(getLoadTpl).render(data, function(html){
                detailView.innerHTML = html;
            });

            $('.toInquiry').on('click', function(event){
                event.preventDefault(); // 阻止默认行为
                // 在这里放置你想要执行的代码，比如：
                window.parent.go_to_page_general('./html/inquiry/index.html');
            });
        });
        //初始化折线图
        $(function () {
            //默认刚进页面查询最近7天的数据
            getHistogram(3,formatDate(-7),formatDate(0))
            $("#test3").val(formatDate(-7) + ' - '+formatDate(0))
        });

        // 柱状图
        function getHistogram(type,beginDate,endDate){
            send_req('Order/getHistogram', {
                type:type,
                beginDate:beginDate,
                endDate:endDate,
                user_id:$('#userList').val()
            }, function (data) {
                layer.closeAll('loading');
                xdata = data.xdata;
                returndata = data.order_return;
                paydata = data.order_pay;
                var option = getEchart(xdata, returndata, paydata);
                bar.setOption(option,true);
                bar.resize();
            });
        }
        function getEchart(xdata, returndata, paydata) {
            var option = {
                legend: {
                    data:['收入', '支出']
                },
                xAxis: {
                    type: 'category',
                    data: xdata,
                    name:'日期'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    show: true // 必须引入 tooltip 组件
                },
                yAxis: {
                    type: 'value',
                    name: '金额'
                },

                toolbox: {
                    show: true,
                    right:'3%',
                    orient:'vertical',
                    feature: {
                        saveAsImage: { show: true },
                        magicType: {
                            type: ['line', 'bar'],
                        },
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: function (e){
                                var opts = e.getOption();
                                console.log(opts);
                                opts.toolbox[0].feature.myFull.show=false;
                                //window.top表示最顶层iframe  如果在当页面全屏打开 删去window.top即可
                                window.top.layer.open({
                                    title:false,
                                    type:1,
                                    area: ["1200px", "700px"],
                                    content:"<div class=\"fullChart\" id=\"fullChart\" style=\"height:100%;width:100%;top: 30px; \"></div>",
                                    success: function (layero, index) {
                                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                                        // echarts.dispose( window.top.document.getElementById('fullChart'));
                                        var fullchart  = echarts.init( window.top.document.getElementById('fullChart'));
                                        // fullchart.clear();
                                        fullchart.setOption(opts,true);
                                    }
                                })
                            }
                        },
                    },
                    top: 25,
                },
                series: [{
                    data: returndata,
                    type: 'line',
                    name:'收入',

                    itemStyle: {
                        color:'#ff6011',
                        normal: {
                            color:'#ff6011',
                            lineStyle:{color:'#ff6011'}
                        }
                    }
                },
                    {
                        data: paydata,
                        type: 'line',
                        name:'支出',
                        itemStyle: {
                            color:'#0564e1',
                            normal: {
                                color:'#0564e1',
                                lineStyle:{color:'#0564e1'}
                            }
                        }
                    }]
            };
            return option;
        }

        //日期范围
        laydate.render({
            elem: '#test1'
            , type: 'year'
            , range: true
            ,trigger: 'click',
            max:0
        });
        laydate.render({
            elem: '#test2'
            , type: 'month'
            , range: true
            ,trigger: 'click',
            max:0
        });
        laydate.render({
            elem: '#test3'
            , type: 'date'
            , range: true
            ,trigger: 'click',
            max:0
        });

        form.render();

        $(".search_btn").click(function () {
            if(type == 1){
                beginDate = $("#test1").val().substring(0,4);
                endDate = $("#test1").val().substring(7,11);
                if(beginDate == "" || endDate == ""){
                    layer.msg("请选择年范围");
                    return;
                }
            }
            else if (type == 2){
                beginDate = $("#test2").val().substring(0,7);
                endDate = $("#test2").val().substring(10,17);
                if(beginDate == "" || endDate == ""){
                    layer.msg("请选择月范围");
                    return;
                }
            }
            else{
                beginDate = $("#test3").val().substring(0,10);
                endDate = $("#test3").val().substring(13,23);
                if(beginDate == "" || endDate == ""){
                    layer.msg("请选择日期范围");
                    return;
                }
            }
            getHistogram(type,beginDate,endDate)
        });


        //获取n天之后的日期
        function formatDate(n){
            var date = new Date();
            var year,month,day
            date.setDate(date.getDate()+n)
            year = date.getFullYear();
            month = date.getMonth() + 1;
            day = date.getDate();
            s = year + '-' + (month < 10 ? ('0'+ month) :month) + '-' + (day < 10 ? ('0'+ day) :day)
            return s
        }
    })
</script>
</body>
</html>